<template>
    <div class="talkAll">
        <div class="talkerList">
          <a-menu
            :default-selected-keys="[recent]"
            mode="inline"
            theme="light"
            :inline-collapsed="collapsed">
            <a-menu-item v-for="(name,index) in nameList" :key="index" @click="updateTalkList(index)">
              <span>{{name}}</span>
            </a-menu-item>
          </a-menu>
        </div>
        <div class="talkPart">
            <div class="sentencePart" ref="sentencePart">
              <table>
                <span v-for="(sentence,index) in sentenceList" :key="index" style="width:100%;display:block">
                <tr v-if="sentence.admin==true">
                  <td style="width:50%"></td>
                  <td ><h1 class="type1">{{sentence.content}}</h1></td>
                </tr>
                <tr v-else>
                  <td ><h1 class="type2">{{sentence.content}}</h1></td>
                  <td style="width:50%"></td>
                </tr>
                </span>
               
              </table>
            </div>
            <div class="sendPart">
              <a-comment>
                  <div slot="content">
                      <a-form-item>
                          <a-textarea :rows="4" :value="value" @change="handleChange" style="resize:none;width:99%" @keydown.enter.native.prevent="handleSubmit"/>
                      </a-form-item>
                      <a-form-item>
                          <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                          发送
                          </a-button>
                      </a-form-item>
                  </div>
              </a-comment>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import {mapActions,mapState,mapMutations} from 'vuex'
export default {
    computed:{
    ...mapState({
      talkUpdate: 'talkUpdate',
      signIn: state => state.account.signIn,
      account:state=> state.account.account
    })
  },
    data() {
      return {
        collapsed: false,
        comments: [],
        submitting: false,
        value: '',
        moment,
        recent: 0,
        sentenceList:[
        ],
        nameList:[]
      };
  },
  watch:{
    talkUpdate:{
      immediate:true,
      handler(newVal){
        if(newVal)
        {
            this.updateList() 
        }
      }
    }
  },
  methods: {
    ...mapActions({
      getNameList:'talk/getNameList',
      getTalkList:'talk/getTalkList',
      insertSentence:'talk/insertSentence',
      
    }),
    ...mapMutations({
      finishUpdate: 'finishUpdate',
      signOut:'account/signOut'
    }),
    handleSubmit() {
      if (!this.value||this.value==null) {//用户的admin为0
        this.openNotification('NOK','发送信息错误','请勿发送空信息!')
        return;
      }
      this.insertSentence({username:this.nameList[this.recent],admin:1,content:this.value}).then((res)=>{
        this.updateTalkList(this.recent)
        //  console.log(res)
      },(error)=>{
        this.openNotification('NOK','发送信息失败','服务器开了会儿小差,请重新发送!')
      })
      this.submitting = true;

      setTimeout(() => {
        this.submitting = false;
        this.comments = [
          {
            author: 'Han Solo',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            datetime: moment().fromNow(),
          },
          ...this.comments,
        ];
        this.value = '';
      }, 1000);
    },
    handleChange(e) {
      this.value = e.target.value;
    },
     toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    updateList(){
      this.getNameList().then((res)=>{
          this.nameList.length = 0
          for(let item of res){
              this.nameList.push(item);
          }
          this.recent=this.recent
          this.updateTalkList(this.recent)
          this.finishUpdate()
      },(error)=>{
        this.openNotification('NOK','获取聊天列表失败','服务器开了会儿小差,请刷新重试!')
      })
      
    },
    updateTalkList(key) {
      this.recent = key
      this.getTalkList(this.nameList[key]).then((res) => {
      let i = 0
      this.sentenceList.length = 0
      for(let item of res){
          item.key = i++
          this.sentenceList.push(item);
      }
      this.$nextTick(function(){
        let div = this.$refs.sentencePart
        div.scrollTop = div.scrollHeight
      })
      
      }, (error) => {
        this.openNotification('NOK','获取对话记录失败','服务器开了会儿小差,请刷新重试!')
      })
    },
    openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    }
  },
  mounted(){
    if(this.signIn===false||this.token===''||this.token===null){
        	this.signOut()
        	this.openNotification("NOK","未登录","请先登录管理员账号!")
        	this.$router.push("/mainPage/login")
  	}
    else{
      this.updateList()
    }
    
  }
};
</script>

<style lang="scss" scoped>
table{
  width: 100%;
  display: block;
  padding-left: 1%;
  padding-right: 1%;
  tr{
    width: 100%;
    margin-top: 1%;
    display: flex;
    td{
      width: 50%;
      h1.type1{
        width: auto;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto;
        border-radius: 10px;
        background-color: rgba(24, 144, 255, 100);
        color: rgba(255, 255, 255, 100);
        font-size: 16px;
        text-align: left;
        font-family: Roboto;
        border: 1px solid rgba(255, 255, 255, 100);
        word-break:break-all; 
        float: right;
      }
      h1.type2{
        width: auto;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 100);
        color: rgba(24, 144, 255, 100);
        font-size: 16px;
        text-align: left;
        font-family: Roboto;
        border: 1px solid rgba(24, 144, 255, 100);
        word-break:break-all; 
        float: left;
      }
      
    }
  }
}
.talkAll{
    width: 95%;
    height: 93%;
    margin-left: 2.5%;
    margin-top: 1.5%;
    border: 1px solid rgba(0,0,0,0.2);
    padding-top: 1%;
    padding-bottom: 1%;
    display: flex;
    background-color: white;
    .talkerList{
        width: 15%;
        height: 100%;
        max-height: 100%;
        min-height: 100%;
        overflow-y: scroll;
    }
    .talkPart{
        width:90%;
        height: 100%;
        border-left: 1px solid rgba(0,0,0,0.2);
        margin-left: 0.5%;
        padding: 0.5%;
        .sentencePart{
          width:100%;
          height: 70%;
          border-bottom: 1px solid rgba(0,0,0,0.2);
          overflow-y: scroll;
        }
        .sendPart{
          width:100%
        }
    }
}
::-webkit-scrollbar-track
{
	box-shadow: inset 0 0 6px rgba(15, 113, 241, 0.788);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(90, 88, 231, 0.747);
	background-color: rgb(72, 202, 253);
}



</style>
